<template>
  <div class="jieshao mt20 w">
    <div class="left fl"><img :src="product.img" style="width: 100%;height: 100%"></div>
    <div class="right fr">
      <div class="h3 ml20 mt20">{{product.name}}</div>
      <div class="jianjie mr40 ml20 mt10">变焦双摄，4 轴防抖 / 骁龙835 旗舰处理器，6GB 大内存，最大可选128GB 闪存 / 5.15" 护眼屏 / 四曲面玻璃/陶瓷机身</div>
      <div class="jiage ml20 mt10">{{product.prize}}元</div>
      <div class="ft20 ml20 mt20">选择版本</div>
      <div class="xzbb ml20 mt10">
        <div class="banben fl">
          <a>
            <span>全网通版 6GB+64GB </span>
            <span>2499元</span>
          </a>
        </div>
        <div class="banben fr">
          <a>
            <span>全网通版 6GB+128GB</span>
            <span>2899元</span>
          </a>
        </div>
        <div class="clear"></div>
      </div>
      <div class="ft20 ml20 mt20">选择颜色</div>
      <div class="xzbb ml20 mt10">
        <div class="banben">
          <a>
            <span class="yuandian"></span>
            <span class="yanse">亮黑色</span>
          </a>
        </div>

      </div>
      <div class="xqxq mt20 ml20">
        <div class="top1 mt10">
          <div class="clear"></div>
        </div>
        <div class="bot mt20 ft20 ftbc">总计：{{product.prize}} 元</div>
      </div>
      <div class="xiadan ml20 mt20">
        <input class="jrgwc"  type="button" name="jrgwc" value="立即选购" />
        <input class="jrgwc" type="button" name="jrgwc" value="加入购物车" />

      </div>
    </div>
    <div class="clear"></div>
  </div>
</template>

<script>
    export default {
        name: "index",
      data: function(){
          return{
              product: {}
          }
      },
      mounted() {
          this.$axios.get('/detail',{
            params:{
              id: this.$route.query.id
            }
          }).then(response => {
            this.product = response.data.massage
          })
      }

    }
</script>

<style scoped>
  @import '../../assets/css/login.css';
  @import '../../assets/css/style.css';
</style>
